HTML quick reference

The authoritative source of information on the structure of HTML documents is the IETF HTML 2.0 specification. This document should be available at the following URL:

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

The HTML rules used by HoTMetaL also contain some elements and attributes from the HTML 3.0 specification, as well as some elements and attributes that are supported by the Netscape browser.

This section provides a short summary of the HTML 2.0 elements and the supported extensions. The rules governing the HTML format are quite flexible, and furthermore HoTMetaL will guide you through the document structure: therefore, the approach followed here will not be to enumerate all the possible combinations of elements. Rather, an overview of the structure will be presented, together with a discussion of the different groups of elements (emphasis, links, lists, etc.).

Overview

• An element called HTML surrounds the whole document.
• This element contains two sub-elements, HEAD and BODY. These elements are required.
• HEAD has sub-elements that define header material:
  • TITLE: document title. This element is required.
  • BASE: can be used to record the document's URL. The URL recorded here may be used to resolve a `relative URL' (necessary if the document is not accessed in its original location).
  • ISINDEX: indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing.
  • LINK: indicates a relationship between this document and some other object on the Web.
  • META: gives information that appears in HTTP headers.
• Inside the BODY element, heading elements (H1 through H6) are used to delimit major divisions of the document (headings are not mandatory, however). Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines:
  • H1 should be used as the highest level of heading, H2 as the next highest, and so forth.
  • You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them.

Block formatting

The major divisions of a document body's structure comprise the following elements:

• ADDRESS: if you want to include the address of the author of the document, enter it inside this element.
• BLOCKQUOTE: used for quotes from another source, requiring special block-style formatting.
• DL, DIR, MENU, OL, UL: list elements
• P: paragraphs.
• PRE: pre-formatted text. Use this element when you want the browser to use the same line breaks and spacing that you entered. The text will be formatted by a browser using a fixed-width `typewriter' font.

Character formatting

The following elements are used primarily to add emphasis to inline text:

• B: bold.
• CITE: represents a document citation.
• EM: browsers usually represent this element in italic.
• I: italic.
• STRONG: browsers usually represent this element in bold.
• TT: characters inside this element are formatted with a `teletype' font (a fixed-width typewriter font, such as Courier).

Line breaks

If you want to force a browser to break the current line in the text, insert a BR element (you can do this by clicking on the toolbar button). You can't type inside this element: it just causes a line break.

Horizontal lines

To cause the browser to display a horizontal line (rule) in your document, insert an HR element (you can do this by clicking on the toolbar button). Individual browsers may display lines of different widths and lengths.

List elements

HTML supplies five list elements. With the exception of DL, list elements are composed of one or more LI (list item) elements.

You can nest lists by inserting a UL, OL, etc., inside a list item (LI).

• OL: ordered list. Items in this list are numbered automatically by the browser. The numbering will reflect nesting levels.
• UL: unordered list. Items in this list start with a list mark such as a bullet. Browsers will usually change the list mark in nested lists.
• DIR: directory list. This is an unordered list. Each LI element in this kind of list should be no longer than 24 characters.
• MENU: menu list. This is an unordered list. Each LI element in this kind of list should be no longer than one line.
• DL: list of definitions. This is an unordered list. This kind of list is different from the others. Each `item' in a DL consists of one or more terms (DT elements), followed by definitions (DD elements).

Each list type also has a `compact' version, which will be displayed with less whitespace in a browser.

You can choose a menu lists, directory lists, and all compact lists from the (`Other lists')toolbar button.

Link elements

It is normal for HTML documents to contain links to other documents, which can be located anywhere on the Web. These links are provided by URLs (Uniform Resource Locators), which give the location and filename of a document, and the method used to access it.

The following elements represent links to other documents:

• A: anchor. The HREF attribute of this element represents a URL. If this attribute has a value, the content of the element will be highlighted when the document is displayed in a browser window, and clicking on this content will cause the browser to attempt to open the file specified by the URL.
• IMG: image. This element represents a graphic image. It is typically used for inline images-you should be aware that some browsers may not be able to display such images. (In this case, the text, if there is any, given in the ALT attribute may be shown.) The SRC attribute represents a URL.

Links to a specific location

This topic is covered in an example in the tutorial section.

In general, you can set up a `source' and `target' anchor pair by setting the NAME attribute of the target anchor to `string' and setting the URL of the source anchor to `#string'. This sets up a one-way link. You can set up a two-way link by editing the two anchors so that each one's NAME attribute corresponds to the other's URL. See the section Links to a specific location in the URLs chapter for more information.

`Hot images'

A `hot image' is used like an anchor-when you click on the image, the browser performs an action.

This is very easy to accomplish: you just need to insert an IMG element inside an A element. Both elements will have a URL: the IMG's URL locates the image, and the A's URL locates the file that is retrieved when you click on the image.

Images with hot spots

Sometimes you will see images that have several `hot spots' that you can click on and cause URLs to be accessed. This is done using a image map file, which tells the browser where the hot spots are. To prepare such a file, you'll need other tools besides HoTMetaL; see the section Image maps in the Working with images chapter for more information. You can also retrieve the document `Overview on using Clickable Image Maps' by opening the file faq.html, located in the HoTMetaL installation directory, with a browser and clicking on the appropriate anchor.

Forms

The following elements are used to construct forms that the user can fill in and submit over the Web. When your document is browsed, the browser will generate the appropriate graphical objects.

• FORM: the top-level element for a form. It surrounds all of the other form elements.
• INPUT: generates a text entry box, push button, radio button, or check button.
• SELECT: represents a group of choices that a user can make. Generates an option menu or scrollable list.
• OPTION: one choice in a SELECT group.
• TEXTAREA: generates a field that allows the user to enter several lines of text.

For more information on forms, see the tutorial on forms. You can also retrieve the document `Information on setting up form functionality' by opening the file faq.html, located in the HoTMetaL installation folder, with a browser and clicking on the appropriate anchor.

`Code' elements

The elements in this section would normally be used in technical manuals or papers.

• CODE: code samples.
• KBD: used to display text that a user would enter at the keyboard. (Do not confuse this with INPUT, used in forms.)
• SAMP: literal characters.
• VAR: represents a variable name.

Netscape and HTML 3.0 extensions

HoTMetaL lets you use the Netscape extensions to HTML 2.0 (for example, the FONT element) and some HTML 3.0 elements. These are available from the markup commands (Insert Element... and Change..., Edit SGML Attributes...) or from the (`Extensions to HTML 2.0') toolbar button.

It is important to realize that these extensions are non-standard, are not supported by all browsers (many are supported only by Netscape), and could change at any time. You should also consult the Netscape extensions documentation (see the Netscape home page, http://www.mcom.com) and the HTML 3.0 documentation (see the W3O home page, http://www.w3.org).

The following list describes some common extensions (at the time of this writing). Any attributes that are described should be edited with the Edit SGML Attributes... command. That is, put the insertion point inside the element in question and then choose this command-see also Attributes for more information on attributes.

• Background color: this is controlled by the BGCOLOR attribute of the BODY element. The value of this attribute must be a color in hexadecimal red-green-blue format, e.g., `#ad65b7'.
• Background image: this is controlled by the BACKGROUND attribute of the BODY element. The value of this attribute must be a filename that specifies the image; this filename can be expressed as a complete URL if necessary. Note that you can't use Edit URL... to edit this attribute.
• Text and link colors: the TEXT, LINK, ALINK, and VLINK attributes of BODY control the colors of text, links, active links (links currently being clicked on), and visited links (links that have already been clicked on), respectively. The values must be colors in hexadecimal red-green-blue format.
• Blinking text: surround text with the BLINK element to cause it to blink on and off in the browser.
• Centered text: surround text with the CENTER element to cause it to be centered in the browser. Some elements also have an ALIGN attribute that can be set to the value `CENTER'. This will work in some browsers that don't support the CENTER element.
• Preventing line breaks: surrounding text with the NOBR element prevent the browser from inserting line breaks. This element should be used only with short pieces of text (i.e., a few words).
• Changing the font size: you can change the font size for a piece of text by surrounding it with the FONT element and then setting its SIZE attribute to the desired font (point) size. SIZE can also have a relative (+/-) value that causes the browser to add or subtract the specified value from the current font size.
• Image alignment: Netscape has added a number of possible values for the ALIGN attribute of the IMG element. Only the standard HTML 2.0 values `Bottom', `Middle', and `Top' are available via the Edit Image dialog box. Use Edit SGML Attributes... if you want to choose another value.
• Paragraph alignment: this feature is available via the ALIGN attribute of the P element.
• The META element: if you wish to specify a URL for this element, you can do so by editing the URL attribute with Edit SGML Attributes....

HTML tables are also supported: see the chapter Tables.